{extend name="adminblue/base" /}
{block name="resources"/}
<style>
	.data-loading-eject-layer {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10000;
		background: rgba(0, 0, 0, 0.4);
		display: none;
	}

	.prompt_information {
		width: 200px;
		height: 200px;
		position: relative;
		margin: auto;
		background: #fff;
		top: 30%;
		box-shadow: 0 0 6px -1px #bbb;
		border-radius: 20px;
	}

	.prompt_information .load-icon {
		width: 150px;
		height: 150px;
		line-height: 200px;
		margin: 0 auto;
		text-align: center;
	}

	.prompt_information .load-icon i {
		color: #bbb;
	}

	.prompt_information .information {
		height: 50px;
		text-align: center;
	}

	.progress_bar {
		width: 90%;
		margin: 5px auto;
		height: 5px;
		border: 1px solid #ddd;
	}

	.progress_bar .speed_of_progress {
		width: 3%;
		height: 5px;
		background: #0689e1;
	}

	.btn-common-delete:hover {
		color: #fff;
	}

	.btn-common-delete {
		background: #0059d6;
	}

	.mytable th {
		padding-left: 0px;
	}
</style>

{/block}
{block name="main"}
<!--<table class="mytable select">
	<tr>
		<th >
			<button class="btn-common" id="UpdateFansList" href="javascript:;" style="float: left;">
				<i class="fa fa-refresh" aria-hidden="true"></i>
				<span>更新粉丝列表</span>
			</button>
		</th>
		<th style="position: relative;">
			<span>下单时间：</span>
			<input type="text" id="startDate" class="input-common middle" placeholder="请选择开始日期"
				   onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"/>
			&nbsp;-&nbsp;
			<input type="text" id="endDate" placeholder="请选择结束日期" class="input-common middle"
				   onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"/>
			<button class="btn-common-white more-search"><i class="fa fa-chevron-down"></i></button>
			<button onclick="searchData()" class="btn-common">搜索</button>

			&lt;!&ndash; 更多搜索 &ndash;&gt;
			<div class="more-search-container">
				<dl>
					<dt>粉丝名称：</dt>
					<dd>
						<input type="text" id='search_text' placeholder="请输入粉丝名称" class="input-common middle" />
					</dd>
				</dl>
				<dl>
					<dt>是否关注：</dt>
					<dd>
						<select name="is_sub" class="input-common middle" id="user_is_sub">
							<option value="">全部</option>
							<option value="1">已关注</option>
							<option value="0">取消关注</option>
						</select>
					</dd>
				</dl>
				<dl>
					<dt></dt>
					<dd>
						<button onclick="searchData()" class="btn-common">搜索</button>
					</dd>
				</dl>
			</div>
		</th>
	</tr>
</table>-->
<div id="fansChart" style="width: 100%;height: 360px">

</div>

{/block}
{block name="script"}
<script src="ADMIN_JS/plugin/echarts.common.min.js"></script>
<script type="text/javascript">

	$(function () {

		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('fansChart'));
		var fansCount = '{$fanscount}';
		var ordercount = '{$ordercount}';
		var add_points = '{$add_points}';
		var amount = '{$amount}';
		var option = {
			title: {
				text: 'Fans of statistical'
			},
			tooltip: {
				trigger: 'axis'
			},
			legend: {
				data: ['粉丝关注数', '当日订单数', '当日订单新增积分数', '当日订单总金额']
			},
			grid: {
				left: '5%',
				right: '5%',
				bottom: '3%',
				containLabel: true
			},
			toolbox: {
				feature: {
					saveAsImage: {}
				}
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: getDate()
			},
			yAxis: {
				type: 'value'
			},
			series: [
				{
					name: '粉丝关注数',
					type: 'line',
					stack: '总量',
					data: JSON.parse(fansCount)
				},
				{
					name: '当日订单数',
					type: 'line',
					stack: '总量',
					data: JSON.parse(ordercount)
				},
				{
					name: '当日订单新增积分数',
					type: 'line',
					stack: '总量',
					data: JSON.parse(add_points)
				},
				{
					name: '当日订单总金额',
					type: 'line',
					stack: '总量',
					data: JSON.parse(amount)
				}
			]
		};
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	})

	function getDate() {
		//设置日期，当前日期的前七天
		var myDate = new Date(); //获取今天日期
		var newDate = new Date(); //获取今天日期
		myDate.setDate(myDate.getDate() - 7);
		var dateArray = [];
		var dateTemp;
		var week;
		var flag = 1;
		for (var i = 0; i < 7; i++) {
			dateTemp = myDate.getFullYear() + '-' + (myDate.getMonth() + 1) + "-" + myDate.getDate();
			week = myDate.getDay();
			switch (week) {
				case 0:
					week = '星期天';
					break;
				case 1:
					week = '星期一';
					break;
				case 2:
					week = '星期二';
					break;
				case 3:
					week = '星期三';
					break;
				case 4:
					week = '星期四';
					break;
				case 5:
					week = '星期五';
					break;
				case 6:
					week = '星期六';
					break;
			}


			if (newDate.getDate() - myDate.getDate() == 0) {
				dateTemp = '今天';
			} else if (newDate.getDate() - myDate.getDate() == 1) {
				dateTemp = '昨天';
			} else if (newDate.getDate() - myDate.getDate() == 2) {
				dateTemp = '前天';
			}
			dateArray.push(dateTemp + '(' + week + ')');
			myDate.setDate(myDate.getDate() + flag);
		}
		return dateArray;
	}


	function initInfo(page_index) {
		// var startDate = $("#startDate").val();
		// var endDate = $("#endDate").val();
		// var search_text = $("#search_text").val();
		// var user_is_sub = $("#user_is_sub").val();
		$.ajax({
			type: "post",
			url: "{:__URL('ADMIN_MAIN/member/fanschart')}",
			data: {
				// "search_text": search_text,
				// "startDate": startDate,
				// "endDate": endDate,
				// "user_is_sub": user_is_sub,
			},
			success: function (data) {

			}
		});
	}


	function searchData() {
		LoadingInfo(1);
	}


	// 点击显示更多搜索
	$(".more-search").on("click", function (e) {
		$(".more-search-container").slideToggle();
		$(document).one("click", function () {
			$(".more-search-container").slideUp();
		});
		e.stopPropagation();
	})

	$(".more-search-container").on("click", function (e) {
		e.stopPropagation();
	});
</script>
{/block}